let message = document.querySelector("#message")

window.onload = function () {
    let res;
    ajax({
        url: "http://chst.vip:1234/api/getbaicaijiatitle",
        success(res) {
            let cateBox = document.querySelector('.navlist');
            let html = "";
            var rarr = [...res.result]
            rarr.forEach(item => {
                html += `
            <li data-titleid="${item.titleId}">${item.title}
            </li>
            `
            })
            cateBox.innerHTML = html;
            document.querySelector('.navlist').firstElementChild.classList.add("active")

            let btns = document.querySelectorAll('.navlist > li')
            for (var i = 0; i < btns.length; i++) {
                btns[i].dataset.index = i
                btns[i].onclick = function () {
                    var index = this.dataset.index - 0;
                    for (var j = 0; j < btns.length; j++) {
                        btns[j].classList.remove('active')
                    }
                    btns[index].classList.add('active')
                }
            }
            document.querySelector(".navlist").addEventListener('click', function (e) {
                var titleId = e.target.getAttribute('data-titleid');
                console.log(titleId);
                a = titleId;
                inforlist(a)
            })

            function moren() {
                let res;
                ajax({
                    url: "http://chst.vip:1234/api/getbaicaijiaproduct",
                    success(res) {
                        res = res.result;
                        console.log(res);
                        let html = "";
                        res.forEach(item => {
                            html += `
                            <div class="box">
                                <div class="img">${item.productImg}</div>
                                <div class="infor">
                                    <h4>${item.productName}</h4>
                                    <div class="price">
                                    ${item.productPrice}
                                    </div>
                                    <div class="down">
                                        ${item.productCouponRemain}
                                            <div class="bar-in">100%</div>
                                            
                                        <span>已领126张/剩余0张</span>
                                    </div>
                                    <div class="click">
                                        <div class="left">${item.productCoupon}</div>
                                        <div class="right">${item.productHref}</div>
                                    </div>
                                </div>
                        </div>`
                        });
                        message.innerHTML = html
                    },
                    data: {
                        titleid: 0,
                    },
                    error(err, xhr) {
                        console.log(err);
                    }
                })
            }
            moren()


            function inforlist(a) {
                let res;
                ajax({
                    url: "http://chst.vip:1234/api/getbaicaijiaproduct",
                    success(res) {
                        res = res.result;
                        console.log(res);
                        let html = "";
                        res.forEach(item => {
                            html += `
                            <div class="box">
                                <div class="img">${item.productImg}</div>
                                <div class="infor">
                                    <h4>${item.productName}</h4>
                                    <div class="price">
                                    ${item.productPrice}
                                    </div>
                                    <div class="down">
                                        ${item.productCouponRemain}
                                            <div class="bar-in">100%</div>
                                            
                                        <span>已领126张/剩余0张</span>
                                    </div>
                                    <div class="click">
                                        <div class="left">${item.productCoupon}</div>
                                        <div class="right">${item.productHref}</div>
                                    </div>
                                </div>
                        </div>`
                        });
                        message.innerHTML = html
                    },
                    data: {
                        titleid: a,
                    },
                    error(err, xhr) {
                        console.log(err);
                    }
                })
            }
            inforlist()

        },
    })
}

